// ========== 获取文章类别的下拉框 ==========
let form = layui.form;
axios.get('/my/article/cates').then(({ data: { data } }) => {
    let newArr = data.map(
        ({ Id, name }) => ` <option value="${Id}">${name}</option>`
    )
    $('[name=cate_id]').append(newArr.join(''))
    // 手动渲染更新
    form.render()
})

// ========== 富文本编辑器初始化 ==========
const E = window.wangEditor
const editor = new E("#contentBox")
// 调整层级(防止挡住下拉框内容)
editor.config.zIndex = 50;
editor.create();
// 使用 editor.txt.html() 获取 html 
editor.txt.html()

// ========== 图片封面裁剪 ==========
// 获取裁剪区域的 DOM 元素
let $image = $(".container img");
// 裁剪选项
let options = {
    aspectRatio: 400 / 280,
    preview: '.preview'
}
// 初始化裁剪区域
$image.cropper(options)

// ========== 点击，选择封面，弹出框，用户选择文件 ==========
$('#btnChooseCoverImage').on('click', function () {
    $('#fileCover').click();
});
//给文件域注册change事件，更换剪裁图片
$('#fileCover').on('change', function () {
    // 获取用户选择的文件
    let file = this.files[0]
    if (!file) {
        return layer.msg("请选择图片")
    }
    // 将文件对象转为地址
    let imgSrc = URL.createObjectURL(file)
    // 先销毁裁切区域，再设置图片的src，再重新渲染
    $image.cropper('destroy').attr('src', imgSrc).cropper(options)
})

// ========== 文章点击状态 ==========
let state;
$('#btnPublish').on('click', function () {
    state = '已发布'
})
$('#btnSave').on('click', function () {
    state = '存为草稿'
})

// ========== 获取表单数据，ajax发送请求 ==========
$('#form').on('submit', function (e) {
    e.preventDefault();
    // 收集数据 => 接口要求的是FormData格式数据(内容+封面没有收集)
    let fd = new FormData(this);
    // 对于FormData收集不到的数据，可以使用append方法进行追加
    // 语法：fd.append(name,value)
    // editor.txt.html() => 可以获取到富文本编辑器的内容（带标签）
    fd.append("content", editor.txt.html())

    // 收集文章状态
    fd.append('state',state)

    // 处理封面
    $image
        .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
            width: 400,
            height: 280
        })
        .toBlob(function (blob) {
            // 将 Canvas 画布上的内容，转化为文件对象
            // 得到blob文件对象后，进行后续的操作 ==> 通过 FormData来收集数据， ajax提交数据
            
            // 追加封面数据
            fd.append('cover_img', blob)

            // 收集完数据之后 =>  发送ajax请求 
            axios.post('/my/article/add', fd).then(({data:{status}}) => {
                if (status !== 0) {
                    // 发布失败
                    return layer.msg('发布失败')
                }

                layer.msg(
                    '发布成功',
                    {
                    time :1500, // 2秒关闭，（如果不配置，默认是3秒）
                    },
                    function () {
                        // 跳转页面
                        location.href = '/article/art_list.html'
                    }
                )
            })

            // 检测fd收集到的数据
            // fd.forEach((value, name) => {
            //     console.log(name, value);
            // })
        })
})